<template>
	<!-- #ifdef APP-NVUE -->
	<NVueScrollView
		ref="viewRef"
		:param="props"
		@refresh="() => emit('refresh')"
		@refresherF2Change="(e:string) => emit('refresherF2Change', e)"
		@scrollTopChange="(e:number) => emit('scrollTopChange', e)"
		@update:scrollTop="(e:number) => emit('update:scrollTop', e)"
		@scroll="(e:any) => emit('scroll', e)"
		@scrolltolower="(e:string) => emit('scrolltolower',e)"
		@scrolltoupper="emit('scrolltoupper')"
		@refresherStatusChange="(e:number) => emit('refresherStatusChange', e)"
		@update:refresherStatus="(e:number) => emit('update:refresherStatus', e)"
		@restore="emit('restore')"
		@hidedKeyboard="emit('hidedKeyboard')"
		@refresherTouchstart="(e:number) => emit('refresherTouchstart', e)"
		@refresherTouchmove="(e:number) => emit('refresherTouchmove', e)"
		@refresherTouchend="(e:number) => emit('refresherTouchend', e)"
	>
		<template #f2>
			<slot name="f2"></slot>
		</template>
		<slot />
		<template #refresherComplete>
			<slot name="refresherComplete"></slot>
		</template>
		<template #refresherF2>
			<slot name="refresherF2"></slot>
		</template>
		<template #refresher>
			<slot name="refresher"></slot>
		</template>
		<template #chatNoMore>
			<slot name="chatNoMore"></slot>
		</template>
		<template #chatLoading>
			<slot name="chatLoading"></slot>
		</template>
	</NVueScrollView>
	<!-- #endif -->
	<!-- #ifndef APP-NVUE -->
	<VueScrollView
		ref="viewRef"
		:param="props"
		@refresh="emit('refresh')"
		@refresherF2Change="(e:string) => emit('refresherF2Change', e)"
		@scrollTopChange="(e:number) => emit('scrollTopChange', e)"
		@update:scrollTop="(e:number) => emit('update:scrollTop', e)"
		@scroll="(e:any) => emit('scroll', e)"
		@scrolltolower="(e:string) => emit('scrolltolower',e)"
		@scrolltoupper="emit('scrolltoupper')"
		@refresherStatusChange="(e:number) => emit('refresherStatusChange', e)"
		@update:refresherStatus="(e:number) => emit('update:refresherStatus', e)"
		@restore="emit('restore')"
		@hidedKeyboard="emit('hidedKeyboard')"
		@refresherTouchstart="(e:number) => emit('refresherTouchstart', e)"
		@refresherTouchmove="(e:any) => emit('refresherTouchmove', e)"
		@refresherTouchend="(e:number) => emit('refresherTouchend', e)"
		@touchstart="(e:any) => emit('touchstart', e)"
		@touchmove="(e:any) => emit('touchmove', e)"
		@touchend="(e:any) => emit('touchend', e)"
		@update:virtualList="(e:any[]) => emit('update:virtualList', e)"
		@virtualListChange="(e:any[]) => emit('virtualListChange', e)"
	>
		<template #f2>
			<slot name="f2"></slot>
		</template>
		<template #refresher>
			<slot name="refresher"></slot>
		</template>
		<template #refresherComplete>
			<slot name="refresherComplete"></slot>
		</template>
		<template #refresherF2>
			<slot name="refresherF2"></slot>
		</template>

		<slot />
	</VueScrollView>
	<!-- #endif -->
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import mpMixin from '../../libs/mixin/mpMixin';
/**
 * radioRroup 高性能ScrollView组件
 * @description 不同于list组件需要配合list-item组件使用，该组件自由度更高，适用于瀑布流等内容布局较为不规则的场景
 * @tutorial https://www.uviewui.com/components/radio.html
 * @property {Object} paging-style 设置z-paging的style，部分平台(如微信小程序)无法直接修改组件的style，可使用此属性代替
 * @property {String} height z-paging的高度，优先级低于pagingStyle中设置的height，传字符串，如100px、100rpx、100%
 * @property {String} width z-paging的宽度，优先级低于pagingStyle中设置的width，传字符串，如100px、100rpx、100%
 * @property {Boolean} use-page-scroll 使用页面滚动，默认为否
 * @property {Boolean} use-virtual-list 是否使用虚拟列表，默认为否
 * @property {Boolean} fixed z-paging是否使用fixed布局，若使用fixed布局，则z-paging的父view无需固定高度，z-paging高度默认为100%，默认为是(当使用内置scroll-view滚动时有效)
 * @property {Boolean} use-chat-record-mode 使用聊天记录模式，默认为否
 * @event {Function} change 任一个radio状态发生变化时触发
 * @example <e-radio-group v-model="value"></e-radio-group>
 */
export default defineComponent({
	name: 'e-scroll-view',
	mixins: [mpMixin]
});
</script>
<script setup lang="ts">
import { ref, toRefs } from 'vue';
import { scrollViewProps, scrollViewEmits } from './props';
import { useDefaultProps } from '../../libs/hooks';
import componentsProps, { type DefaultProps } from '../../libs/config/componentsProps';
//  #ifndef APP-NVUE
import VueScrollView from './vue.vue';
// #endif
//  #ifdef APP-NVUE
import NVueScrollView from './nvue.nvue';
// #endif

const { scrollView: scrollViewDefaultProps } = toRefs(componentsProps);

const _props = defineProps(scrollViewProps);
const props = useDefaultProps<DefaultProps['scrollView']>(_props, scrollViewDefaultProps);

const emit = defineEmits(scrollViewEmits);

const viewRef = ref();

const toTop = () => {
	viewRef.value?.handleToTop?.();
};
const endRefresh = () => {
	viewRef.value?.endRefresh?.();
};
const doInsertVirtualListItem = (item: any, index: number) => {
	viewRef.value?.doInsertVirtualListItem?.(item, index);
};
const didUpdateVirtualListCell = (index: number) => {
	viewRef.value?.didUpdateVirtualListCell?.(index);
};
const didDeleteVirtualListCell = (index: number) => {
	viewRef.value?.didDeleteVirtualListCell?.(index);
};
const updateVirtualListRender = (option?: {
	isFirstPage?: boolean
	resetVirtualList?: boolean
}) => {
	viewRef.value?.updateVirtualListRender?.(option);
};


defineExpose({
	toTop,
	endRefresh,
	doInsertVirtualListItem,
	didUpdateVirtualListCell,
	didDeleteVirtualListCell,
	updateVirtualListRender
});
</script>
